<!-- 员工分佣发放总表查看页面 -->
<template>
  <div class="staffCommissionView">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/staffCommission' }">员工佣金发放总表</el-breadcrumb-item>
      <el-breadcrumb-item>查看</el-breadcrumb-item>
    </el-breadcrumb>

    <h3>{{month.split("-").join("年")}}月内部激励明细表</h3>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="受益人姓名：">
        <el-input placeholder="请输入姓名" v-model.trim="staffName" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStaffAllTable" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="reportTable">导出数据</el-button>
        <el-button type="primary" v-if="beforeAdjust" @click="reportBeforeAdjustment">调整前报表</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="姓名" prop="staffName" align="center"></el-table-column>
      <el-table-column label="岗位" prop="stationName" align="center"></el-table-column>
      <el-table-column
        v-for="(item,index) in developersList"
        :key="index"
        :label="item.label + '营收'"
        :prop="item.props"
        align="center"
      >
      <template slot-scope="scope">
        {{scope.row[item.props] ? devFormatter(scope.row[item.props].split("|")[0]) : ''}}
      </template>
      </el-table-column>
      <el-table-column label="公佣" prop="publicAmount" align="center"></el-table-column>
      <el-table-column label="渠道成交佣金" prop="channelAmount" align="center"></el-table-column>
      <el-table-column label="调剂佣金" prop="adjustAmount" align="center"></el-table-column>
      <el-table-column label="市场佣金" prop="marketAmount" align="center"></el-table-column>
      <el-table-column label="内部资源佣金" prop="insideAmount" align="center"></el-table-column>
      <el-table-column label="系统小计" prop="subtotalAmount" align="center"></el-table-column>
      <el-table-column label="线下结余" align="center">
        <template slot-scope="scope">
          <el-input
            @blur="amountOfflineAdjustSave(scope.row.id,scope.row.amountOfflineAdjust,scope.row.amountThisMonthAdjust)"
            type="number"
            size="small"
            v-if="beforeAdjust"
            v-model.number="scope.row.amountOfflineAdjust"
          ></el-input>
          <span v-else>{{scope.row.amountOffline}}</span>
        </template>
      </el-table-column>
      <el-table-column label="本次发放" align="center">
        <template slot-scope="scope">
          <el-input
            size="small"
            type="number"
            v-if="beforeAdjust"
            @blur="amountOfflineAdjustSave(scope.row.id,scope.row.amountOfflineAdjust,scope.row.amountThisMonthAdjust)"
            v-model.number="scope.row.amountThisMonthAdjust"
          ></el-input>
          <span v-else>{{scope.row.amountThisMonth}}</span>
        </template>
      </el-table-column>
      <el-table-column label="年底预留" :formatter="amountThisYear" align="center"></el-table-column>
      <el-table-column label="本年累计预留" :formatter="amountReserveYear" align="center"></el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="tableConfig.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tableConfig.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="tableConfig.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "staffCommissionView",
  data() {
    return {
      id: "",
      staffName: "",
      month: "2019-01",
      tableConfig: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 10
      },
      tableData: [],
      beforeAdjust: true,
      developersList: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.month = this.$route.query.month;
    console.log(this.$route.query.beforeAdjust)
    this.beforeAdjust = this.$route.query.beforeAdjust ? false : true;
    this.getStaffAllTable();
  },
  mounted() {
    if(window.history && window.history.pushState) {
      window.history.pushState(null,null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack,false);
  },
  methods: {
    goBack() {
      if(!this.beforeAdjust) {
        this.beforeAdjust = true;
      }
    },
    amountOfflineAdjustSave(id,amountOfflineAdjust, amountThisMonthAdjust) {
      console.log(id);
      this.$axios
        .post("/commallocation/grant/month/grant/adjust", {
          id: id,
          amountOfflineAdjust: amountOfflineAdjust,
          amountThisMonthAdjust: amountThisMonthAdjust
        })
        .then(res => {
          console.log(res);
          this.$message.success("操作成功!");
        });
    },
    reportBeforeAdjustment() {
      this.beforeAdjust = false;
      this.getStaffAllTable();
    },
    amountThisYear(row) {
      if (this.beforeAdjust) {
        return row.amountThisYearAdjust;
      } else {
        return row.amountThisYear;
      }
    },
    amountReserveYear(row) {
      if (this.beforeAdjust) {
        return row.amountReserveYearAdjust;
      } else {
        return row.amountReserveYear;
      }
    },
    reportTable() {
      this.$axios
        .post("/commallocation/grant/month/export", {
          staffName: this.staffName,
          id: this.id,
          month: this.month
        })
        .then(res => {
          this.$confirm("已导出，请前往报表查询下载", "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warning"
          });
        });
    },
    devFormatter(num) {
      return utils.formatMoney(num);
    },
    getStaffAllTable() {
      this.$axios
        .post(api.getStaffAllTable, {
          pageNum: this.tableConfig.pageNum,
          pageSize: this.tableConfig.pageSize,
          staffName: this.staffName,
          id: this.id
        })
        .then(res => {
          for (let item of res.data) {
            for (let [key, value] of Object.entries(item)) {
              if (Object.prototype.toString.call(value) === "[object Number]" && key != 'id') {
                item[key] = utils.formatMoney(value);
              }
            }
          }
          this.tableData = res.data;
          this.developersList = res.developers;
          this.tableConfig.totalSize = res.total;
        });
    },
    handleCurrentChange() {
      this.getStaffAllTable();
    },
    handleSizeChange(val) {
      this.tableConfig.pageSize = val;
      this.getStaffAllTable();
    }
  },
  components: {},
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
